import { Button, Col, Row, Statistic ,Cascader, Divider,Table } from 'antd';
import React from 'react';
import "./index.css"
import {MoneyCollectOutlined,DollarOutlined} from '@ant-design/icons';
import type { ColumnsType, TableProps } from 'antd/es/table';
interface DataType {
    key: React.Key;
    name: string;
    chinese: number;
    math: number;
    english: number;
  }
  
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'name',
    },
    {
        title: 'ID',
        dataIndex: 'name',
        sorter: (a, b) => a.name.length - b.name.length,
        sortDirections: ['descend'],
      },
    {
      title: '成交金额（元）',
      dataIndex: 'chinese',
      sorter: {
        compare: (a, b) => a.chinese - b.chinese,
        multiple: 3,
      },
    },
    {
      title: '成交时间',
      dataIndex: 'math',
      sorter: {
        compare: (a, b) => a.math - b.math,
        multiple: 2,
      },
    },
    {
      title: '状态',
      dataIndex: 'english',
      sorter: {
        compare: (a, b) => a.english - b.english,
        multiple: 1,
      },
    },
  ];
  
  const data: DataType[] = [
    {
      key: '1',
      name: 'John Brown',
      chinese: 98,
      math: 60,
      english: 70,
    },
    {
      key: '2',
      name: 'Jim Green',
      chinese: 98,
      math: 66,
      english: 89,
    },
    {
      key: '3',
      name: 'Joe Black',
      chinese: 98,
      math: 90,
      english: 70,
    },
    {
      key: '4',
      name: 'Jim Red',
      chinese: 88,
      math: 99,
      english: 89,
    },
  ];
  
  const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
  };
const Amount = () => {
    // 选择条数
    interface Option {
        value: string;
        label: string;
        children?: Option[];
      }
    const options: Option[] = []
    const dropdownRender = (menus: React.ReactNode) => (
        <div>
          {menus}
          <Divider style={{ margin: 0 }} />
          <div style={{ padding: 8 }}>The footer is not very short.</div>
        </div>
      );
    return (
        <fieldset>
            <div className="top">
                <div className='topleft'>
                <div className="iconcon">
                    <DollarOutlined style={{fontSize:40,color:'white'}}/>
                </div>
                <div className="antdcom">
                    <Statistic title="总成交金额（元）" value={112893} style={{marginRight:20}} />
                </div>
                </div>

                <div className='topright'>
                <div className="iconcom">
                    <MoneyCollectOutlined  style={{fontSize:40,color:'white'}}/>
                </div>
                <div className="antdcom">
                    <Statistic title="当天成交额 (元)" value={11285} precision={2} />
                </div>
                </div>
            </div>
            <div className="middle">
            <Button type="primary" shape="round">
                全部订单
            </Button>
            <Button type="primary" shape="round">
                当月订单
            </Button>
            <Button type="primary" shape="round">
                当天订单
            </Button>
            </div>

            <div className="bottom">
                <div className="fromtop">
                                <div>每页显示： <Cascader style={{ width: 80 }} options={options} dropdownRender={dropdownRender} placeholder="10条" /></div>
                </div>
                <Table columns={columns} dataSource={data} onChange={onChange} />;
            </div>
        </fieldset>
    )
}

export default Amount
